<template>
    <view class="container">
        <view class="contain1">
            <u-row class="row">
                <!-- 第一行 -->
                <u-col span="6" class="col" >
                    <u-image src="/static/resource/castle6.png" mode="widthFix" width="90%" class="bg_change"></u-image>
                </u-col>
                <u-col span="6" class="col">
                    <u-image src="/static/resource/castle5.png" mode="widthFix" width="90%" class="bg_first"></u-image>
                </u-col>
            </u-row>
            <u-row class="row">
                <!-- 第二行 -->
                <u-col span="6" class="col" >
                    <u-image src="/static/resource/castle4.png" mode="widthFix" width="90%" class="bg_change"></u-image>
                </u-col>
                <u-col span="6" class="col">
                    <u-image src="/static/resource/castle3.png" mode="widthFix" width="90%" class="bg_first"></u-image>
                </u-col>
            </u-row>
  <u-row class="row">
                <!-- 第san行 -->
                <u-col span="6" class="col" >
                    <u-image src="/static/resource/castle2.png" mode="widthFix" width="90%" class="bg_change"></u-image>
                </u-col>
                <u-col span="6" class="col">
                    <u-image src="/static/resource/castle1.png" mode="widthFix" width="90%" class="bg_first"></u-image>
                </u-col>
            </u-row>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {};
    },
    onLoad() {},
    methods: {}
};
</script>

<style scoped>
.contain1 {
    background-image: url('/static/resource/bgAll.png'); 
    background-size: cover; /* 调整背景图像大小以覆盖整个容器 */
    background-repeat: no-repeat; /* 防止背景图像重复 */
    width: 100%;
   height: 60vh;
    padding: 0;
    margin: 0;
}

.container {
    width: 100%;
    height: 80%; /* 占满整个视口高度 */
    padding: 0;
    margin: 0;
}

.row {
    width: 100%;
    height: 20vh; /* 每行占总高度的三分之一 */
    margin-bottom: 0;
}

.col {
    width: 50%;
    height: 100%;
    padding: 0;
    margin: 0;
}

.bg_change {
	margin-top: 2vh;
padding-left: 3vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.bg_first {
	
	margin-top: 2vh;
padding-right: 3vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>